import React from 'react';

// 导入action
import * as actions from '../redux/actions';


export default class CmtAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: '',
            content: ''
        }
    }

    // 实现user的双向数据绑定
    userBind(e) {
        const val = e.target.value;
        this.setState({ user: val })
    }
    // 实现评论内容content的双向绑定
    contentBind(e) {
        const val = e.target.value;
        this.setState({ content: val })
    }

    // 发布新评论
    cmtAddHandle(){
        if(this.state.user.trim()==''){
            return alert('请输入姓名');
        }
        if(this.state.content.trim()==''){
            return alert('请输入评论内容');
        }
        const data={
            user:this.state.user,
            content:this.state.content
        }
        this.setState({
            user:'',
            content:''
        });
        this.props.add_comments(data);
    }

    render() {
        return (
            <form role="form">
                <div className="form-group">
                    <textarea onChange={(e) => this.contentBind(e)} className="form-control" style={{ resize: 'none' }} rows="2" placeholder="评论内容" value={this.state.content}></textarea>
                </div>
                <div className="form-group">
                    <input type="text" onChange={(e) => this.userBind(e)} className="form-control" placeholder="评论人" value={this.state.user} />
                </div>
                <button onClick={()=>this.cmtAddHandle()} type="button" className="btn btn-primary">提交评论</button>
            </form>
        )
    }
}